<extend name="Base/common"/>
<block name="head_js">
    <link rel="stylesheet" type="text/css" href="__CSS__/jcarousel.connected-carousels.css">
    <script type="text/javascript" src="__JS__/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="__JS__/jcarousel.connected-carousels.js"></script>
</block>
<block name="body">
    <div class="banner">
        <img src="__IMG__/banner3.jpg" alt="">
    </div>

    <div id="product" class="product">
        <div class="container">
            <div class="left">
                <div class="head">
                    <p>走进合兴铝业</p>
                    <span>ABOUT HEXING</span>
                </div>
                <div id="article_title" class="cont">
                    <volist name="lists" id="val">
                        <a data-id="{$val.id}" class="about-a" href="{:U('Article/about',array('id'=>$val['id']))}#product">
                            {$val.title}
                        </a>
                    </volist>
                </div>
            </div>
            <div class="right">
                <div class="list" style="border: none;">
                    <div class="about-txt">
                        <div class="wrapper">
                            <div class="connected-carousels">
                                <div class="stage">
                                    <div class="carousel carousel-stage">
                                        <ul>
                                            <volist name="article_list" id="val">
                                               <li><img src="{$val.cover_id|get_cover='path'}" width="600" height="400" ></li>
                                            </volist>
                                        </ul>
                                    </div>
                                    <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                                </div>

                                <div class="navigation">
                                    <a href="#" class="prev prev-navigation">&lsaquo;</a>
                                    <a href="#" class="next next-navigation">&rsaquo;</a>
                                    <div class="carousel carousel-navigation">
                                        <ul>
                                           <volist name="article_list" id="val">
                                               <li><img src="{$val.cover_id|get_cover='path'}" width="60" height="40" alt=""></li>
                                           </volist>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_js">
    <script>
        $(function(){
            var id="{$article_data.id}";
            $("#article_title a[data-id='"+id+"']").addClass("about-a-act");
        });
    </script>
</block>